<template>
 <div class="contaner">
   <el-dialog :title="tex" :visible.sync="disabled" width="30%" v-if="disabled">
     <tags
       :addTagList = 'addTagList'
       @chang="handle"
       :currentData = 'currentData'
       :tex="tex" ></tags>
   </el-dialog>
   <el-card class="box-card">
     <el-button type="success" icon="el-icon-edit" size="small" class="right" @click="editTag">新增标签</el-button>
     <!-- 返回学科 -->
     <span style="float:right" v-if="$route.query.name">
        <i class="el-icon-back" style="color:#40b8ff"></i>
        <el-button type="text" @click="back">返回学科</el-button>
     </span>
     <el-form ref="form" :inline="true" :model="form" label-width="80px">
       <el-form-item label="标签名称">
         <el-input v-model="form.tagName"></el-input>
       </el-form-item>
       <el-form-item label="状态">
         <el-select v-model="form.state" placeholder="请选择">
           <el-option label="已启用" value="1"></el-option>
           <el-option label="已禁用" value="0"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
         <el-button size="mini" @click="deleteTag">清除</el-button>
         <el-button type="primary" size="mini" @click="search">搜索</el-button>
       </el-form-item>
     </el-form>
     <!--     提示文本-->
     <div>
       <el-alert
         type="info"
         show-icon>
         <span slot="title">数据一共{{total}}条</span>
       </el-alert>
     </div>
<!--     数据表格-->
     <el-table
       :data="tagList"
       style="width: 100%">
       <el-table-column
         label="序号"
         type="index"
         width="100">
       </el-table-column>
       <el-table-column
         prop="subjectName"
         label="所属学科"
         width="190">
       </el-table-column>
       <el-table-column
         prop="tagName"
         label="标签名称">
       </el-table-column>
       <el-table-column
         prop="username"
         label="创建者">
       </el-table-column>
       <el-table-column
         prop="addDate"
         label="创建日期">
         <template slot-scope="scope">
           {{scope.row.addDate | parseTimeByString}}
         </template>
       </el-table-column>
       <el-table-column
         label="状态">
         <template slot-scope="scope">
           {{scope.row.state === 1 ? '已启用' : '已禁用'}}
         </template>
       </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="scope">
           <el-button type="text" @click="click(scope.row)" class="set">{{trueOrFalse(scope.row.state)}}</el-button>
           <el-button type="text" :disabled="scope.row.state === 1 ? true : false" @click="editTag(scope.row)" class="set">修改</el-button>
           <el-button type="text" :disabled="scope.row.state === 1 ? true : false" @click="delTag(scope.row.id)" class="set">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!--      分页功能-->
     <div class="block">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.page"
         :page-sizes="[5, 10, 15, 20]"
         :page-size="queryInfo.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>
   </el-card>
 </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags'
import tags from '@/module-hmmm/components/tags-add'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'addTag',
  components: {
    tags
  },
  data () {
    return {
      // 标签列表的数据
      tagList: [],
      form: {
        page: 1,
        pagesize: 10
      },
      queryInfo: {
        page: 1,
        pagesize: 10
      },
      // 总的列表数据
      total: 0,
      // 控制启用按钮显示还是隐藏
      isShow: true,
      show: false,
      disabled: false,
      addTagList: [],
      // 标题文本
      tex: '',
      // 每一行的数据
      currentData: {},
      data: ''
    }
  },
  created () {
    this.getList()
    this.GetList()
    this.getOtherData()
  },
  computed: {
    trueOrFalse () {
      return function (val) {
        if (val === 1) {
          return '禁用'
        } else {
          return '启用'
        }
      }
    }
  },
  methods: {
    // 返回
    back () {
      this.$router.back()
    },
    // 获得另一个页面的数据
    async getOtherData () {
      this.form.subjectID = this.$route.query.id
      this.getList()
    },
    handleSizeChange (newSize) {
      this.form.pagesize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.form.page = newPage
      this.getList()
    },
    async getList () {
      const { data: res } = await list(this.form)
      this.total = res.counts
      this.tagList = res.items
      console.log(this.tagList)
    },
    async click (data) {
      try {
        const stat = data.state === 1 ? '0' : '1'
        await changeState({ id: data.id, state: stat })
        this.getList()
      } catch (err) {}
    },
    // // 点击新增
    // async addTag () {
    //   console.log('add')
    //   this.disabled = true
    //   this.tex = '新增目录'
    // },
    // 点击修改
    editTag (data) {
      if (data.id) {
        this.currentData = data
      } else {
        this.currentData = {}
      }
      this.tex = '修改目录'
      this.disabled = true
    },
    // 获得简单的数据列表
    async GetList () {
      try {
        const { data: res } = await simple()
        this.addTagList = res
      } catch (err) {}
    },
    handle () {
      this.disabled = false
      this.getList(this.queryInfo)
    },
    // 删除的点击事件
    async delTag (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((err) => {
        console.dir(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击搜索
    search () {
      try {
        this.getList(this.form)
      } catch (err) {}
    },
    // 点击清除
    deleteTag () {
      this.form = {}
    }
  }
}
</script>

<style scoped lang='less'>
.contaner {
  padding: 10px;
}
.right {
  float: right;
  margin-left: 10px;
}
/deep/.el-dialog__body {
  text-align: right;
}
.set {
  border: 0;
  background-color: #fff;
  font-size: 14px;
}
</style>
